@import '@/app/styles/variables';

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  width: 704px;
  padding: 56px 56px 48px 56px;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  border-radius: 32px;
  z-index: 2100;
  background: var(--simple-morning, #fff);
}

.titleSent {
  text-align: center;
  /* Mobile/Headline/H1 */
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px; /* 125% */
}

.fade {
  position: absolute;
  width: 100vw;
  height: 100%;
  z-index: 90;
  background: var(--Overlay, rgba(0, 0, 0, 0.4));
  opacity: 100%;
}

.flexColCentered {
  display: flex;
  flex-direction: column;
  align-items: self-start;
  justify-content: center;
}

.validatedEmail {
  color: var(--simple-red-day, #ec3333);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 137.5% */
  align-self: self-start;
}

.title {
  color: var(--simple-night, #000);
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px; /* 125% */
}

.closePage {
  position: absolute;
  top: 28px;
  right: 28px;
  cursor: pointer;
  transition: 0.2s all;
  &:hover path {
    fill: gray;
  }
}

.sent {
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  width: 100%;
  line-height: 30px; /* 150% */
  word-break: normal;
}

.title {
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px; /* 125% */
}

.closeCircle {
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;
  &:hover rect {
    fill: #e1e1e1;
  }
}

.chevronLeft {
  position: absolute;
  top: 24px;
  left: 24px;
  cursor: pointer;
  &:hover rect {
    fill: #e1e1e1;
  }
}

.choose {
  display: none;
}

.fadedMobile {
  display: none;
}

.home {
  display: none;
}

@include media(xs) {
  .fadedMobile {
    display: block;
    position: absolute;
    width: 100vw;
    height: 100vw;
    top: 0;
    z-index: 90;
    height: 100vh;
    background: var(--Overlay, rgba(0, 0, 0, 0.4));
    opacity: 100%;
  }

  .home {
    display: block;
    position: absolute;
    top: 12px;
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
  }

  .convert {
    margin-top: 32px;
  }
  .titleSent {
    text-align: center;
    /* Mobile/Headline/H2 */
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 125% */
  }
  .closeCircleMobile {
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .goBack {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: var(--simple-gray-evening, #ababab);
    /* Mobile/Description/Small/Regular */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  .sent {
    text-align: center;
    font-size: 16px;
    font-style: normal;
    word-break: break-all;
    word-wrap: break-word;
    align-self: center;
    font-weight: 400;
    width: 343px;
    line-height: 22px; /* 137.5% */
  }
  .title {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 125% */
    position: static;
    margin-top: 50px;
  }
  .choose {
    display: block;
    position: fixed;
    bottom: 0;
    border-radius: 30px 30px 00px 0px;
    width: 100%;
    z-index: 100;
    background-color: white;
    height: 258px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px 16px 0px 16px;
    gap: 24px;
    -webkit-border-radius: 30px 30px 00px 0px;
    -moz-border-radius: 30px 30px 00px 0px;
    -ms-border-radius: 30px 30px 00px 0px;
    -o-border-radius: 30px 30px 00px 0px;
  }
  .chooseConvert {
    display: block;
    position: fixed;
    bottom: 0;
    border-radius: 30px 30px 00px 0px;
    width: 100%;
    z-index: 100;
    background-color: white;
    height: 304px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px 16px 0px 16px;
    gap: 24px;
    -webkit-border-radius: 30px 30px 00px 0px;
    -moz-border-radius: 30px 30px 00px 0px;
    -ms-border-radius: 30px 30px 00px 0px;
    -o-border-radius: 30px 30px 00px 0px;
  }
}
